<template>
  <div class="my-dialog">
    <div class="header">
    <slot  name="header"></slot>
    </div>
    <div class="content">
        <!-- 1.在子组件中使用slot 占位 -->
        <!-- 在 slot 标签中写的内容就是插槽的默认值 -->
        <!-- 作用:
           当外部传入了标签进来,就是用外部的标签,如果没传标签,就渲染默认内容
         -->
      <slot  name="content">这是默认的内容</slot>
    </div>
    <div class="footer">
        <!-- 作用域插槽 -->
        <!-- 1. 在 slot 上添加属性 (绑定数据) -->
        <!-- 2. 在使用插槽式,通过 v-slot :名字="变量" 来接收 #名字="变量" -->
       <slot  name="footer" :yes="yes" :no="no"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       yes:'yes',
       no:'no'
    };
  },
}
</script>

<style lang="less" scoped>
.my-dialog {
  width: 400px;
  padding: 10px 20px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>